<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情 - WeiLan~Blog</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

       .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            padding: 20px;
        }

       .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

       .article-header {
            text-align: center;
            margin-bottom: 30px;
        }

       .article-header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

       .article-header p {
            color: #666;
            margin: 0;
        }

       .article-content {
            line-height: 1.6;
            margin-bottom: 30px;
            padding: 0 20px;
        }

       .comment-section {
            border-top: 1px solid #e0e0e0;
            padding-top: 20px;
        }

       .comment-section h2 {
            margin-bottom: 20px;
        }

       .comment-item {
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            background-color: #f9f9f9;
        }

       .comment-author {
            font-weight: bold;
            margin-bottom: 5px;
        }

       .comment-text {
            margin-bottom: 5px;
        }

       .comment-date {
            color: #999;
            font-size: 14px;
        }

       .add-comment-form {
            margin-top: 20px;
        }

       .add-comment-form label {
            display: block;
            margin-bottom: 5px;
        }

       .add-comment-form input,
       .add-comment-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }

       .add-comment-form button {
            background-color: #0078d7;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

       .add-comment-form button:hover {
            background-color: #0056b3;
        }

       .footer {
            text-align: center;
            margin-top: 20px;
            color: #666;
            font-size: 14px;
        }

       .footer a {
            color: #0078d7;
            text-decoration: none;
        }

       .footer a:hover {
            text-decoration: underline;
        }

       .quote {
            font-style: italic;
            color: #666;
            margin-top: 10px;
        }
        .status-bar {
    position: fixed;
    top: 0; /* 可以适当调整这个值，让状态栏与标题之间有足够空间 */
    left: 0;
}

.article-header {
    margin-top: 60px; /* 根据实际情况调整这个值，确保标题不被状态栏盖住 */
    text-align: center;
    margin-bottom: 30px;
}


    </style>
</head>

<body>

    <div class="container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span id="currentTime">16:34</span>
            <span>HD</span>
            <span>5G</span>
            <span id="batteryLevel">50%</span>
        </div>

        <!-- 文章标题 -->
        <div class="article-header">
            <h1 id="articleTitle">WeiLan~Blog</h1>
            <p id="articleMeta">
                <span id="articleAuthor">作者：scicat</span>
                <span id="articleDate">发布时间：2024-10-10</span>
            </p>
        </div>

        <!-- 文章内容 -->
        <div class="article-content">
            <p id="articleText">
                一款用于替代外国博客框架的框架
            </p>
        </div>

        <!-- 评论区 -->
        <div class="comment-section">
            <h2>评论</h2>
            <ul id="commentList">
                <!-- 评论将通过 JavaScript 动态添加 -->
                <!-- <li class="comment-item">
                    <p class="comment-author">张三</p>
                    <p class="comment-text">这篇文章写得真好！</p>
                    <p class="comment-date">2024-10-11</p>
                </li> -->
            </ul>

            <!-- 添加评论表单 -->
            <form id="addCommentForm" class="add-comment-form">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">评论：</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">发表评论</button>
            </form>
        </div>
    </div>
    <!-- 底部访问人数 -->
    <div class="footer">
        <p>访问人数: <span id="visitorCount">0</span></p>
        <p>
            ©2025 本博客由 <a href="https://gitee.com/scicat-team/wei_-lan-blog" target="_blank" class="footer-link">Wei Lan-Blog</a> 构架提供
        </p>
        <p class="quote">
            我和别人的故事很少，却和自己的故事有很多。
        </p>
    </div>
    <!-- JavaScript 逻辑 -->
    <script>
        // 记录访问人数
        const visitorCountElement = document.getElementById('visitorCount');
        let visitorCount = localStorage.getItem('visitorCount');
        if (!visitorCount) {
            visitorCount = 1;
        } else {
            visitorCount = parseInt(visitorCount) + 1;
        }
        localStorage.setItem('visitorCount', visitorCount);
        visitorCountElement.textContent = visitorCount;

        // 模拟添加评论功能（这里只是简单示例，实际需要与后端交互）
        const addCommentForm = document.getElementById('addCommentForm');
        addCommentForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const comment = document.getElementById('comment').value;
            const commentList = document.getElementById('commentList');

            const commentItem = document.createElement('li');
            commentItem.classList.add('comment-item');
            commentItem.innerHTML = `
                <p class="comment-author">${name}</p>
                <p class="comment-text">${comment}</p>
                <p class="comment-date">${new Date().toISOString().slice(0, 10)}</p>
            `;
            commentList.appendChild(commentItem);

            // 清空表单
            addCommentForm.reset();
        });
    </script>
</body>

</html>
